import {
  drawer_disable_ok_button,
  drawerFormState,
  drawerInputValidators,
  drawerInstance,
  operateType,
  userStateMap,
} from "./store";
import { handleSubmit } from "./utils";
import styles from "./index.module.less";
import { tmp_proxy } from ".";
export const drawerVisible = ref(false);
export const drawerLoading = ref(false);
export const drawerTitle = ref("");
export const drawerConfig = () => {
  const helpRef = ref<any>(<i class="fs10">{$t("tripartite2")}</i>);
  const defineDrawer = {
    drawerInstance,
    loading: drawerLoading,
    visible: drawerVisible,
    title: drawerTitle,
    maskClosable: true,
    width: "800px",
    formState: drawerFormState,
    slot: {
      extra: () => {
        const { loading } = defineDrawer;
        return (
          <>
            <a-space size={8}>
              {operateType.value != "view" ? (
                <s-button
                  icon={renderIcon("icon-cancel")}
                  onClick={() =>
                    tmp_proxy.$confirm({
                      closable: true,
                      maskClosable: true,
                      icon: null,
                      title: () => <>{$t("base.prompt")}</>,
                      style: {
                        top: "30%",
                      },
                      content: <>{$t("base.cancelTips")}</>,
                      onOk: () => (drawerVisible.value = false),
                    })
                  }
                >
                  {$t("base.cancel")}
                </s-button>
              ) : null}

              <s-button
                icon={renderIcon("icon-tubiao_tijiao")}
                loading={loading.value}
                disabled={
                  drawer_disable_ok_button.value ||
                  drawerInputValidators.some((bool) => bool === true)
                }
                type="primary"
                onClick={async () => handleSubmit()}
              >
                {$t("base.save")}
              </s-button>
            </a-space>
          </>
        );
      },
      extra_form_item: () => {
        return (
          <>
            <a-row class="s-drawer-extra-row" gutter={16}>
              <tips-card
                title={getProxyT("tripartite22")}
                content={getProxyT("tripartite23")}
              />
            </a-row>
            <a-row class="s-drawer-extra-row">
              <s-title>{$t("base.channelBasicInfo")}</s-title>
            </a-row>
            <a-row class="s-drawer-extra-row" gutter={16}>
              <a-col span="12">
                <a-form-item
                  label={$t("tripartite5")}
                  name="pay_merchant_no"
                  rules={[
                    {
                      required: true,
                      trigger: ["change", "blur"],
                      message: $t("tripartite12"),
                    },
                  ]}
                >
                  <s-input
                    vModel={drawerFormState.pay_merchant_no}
                    placeholder={$t("tripartite12")}
                    disabled
                  ></s-input>
                </a-form-item>
              </a-col>

              <a-col span="12">
                <a-form-item
                  label={$t("tripartite6")}
                  name="name"
                  rules={[
                    {
                      required: true,
                      trigger: ["change", "blur"],
                      validator: (rule: any, value: any) => {
                        if (
                          !(
                            /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value) &&
                            value?.length >= 2 &&
                            value?.length <= 12
                          )
                        ) {
                          drawerInputValidators[0] = true;
                          return Promise.reject($t("tripartite17"));
                        }
                        drawerInputValidators[0] = false;
                        return Promise.resolve();
                      },
                    },
                  ]}
                >
                  <s-input
                    vModel={drawerFormState.name}
                    placeholder={$t("tripartite15")}
                    maxlength={12}
                  ></s-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row" gutter={16}>
              <a-col span={12}>
                <a-form-item
                  label={$t("tripartite7")}
                  name="support_pay_passageways"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 16 }}
                >
                  <div class={styles.Grid}>
                    {drawerFormState.support_pay_passageways?.map(
                      (item: any) => (
                        <td>{item}</td>
                      )
                    )}
                  </div>
                </a-form-item>
              </a-col>
              <a-col span={12}>
                <a-form-item
                  label={$t("tripartite8")}
                  name="payCapacity"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 16 }}
                  rules={[
                    {
                      required: true,
                      trigger: ["change", "blur"],
                      message: $t("tripartite13"),
                    },
                  ]}
                >
                  <a-checkbox-group
                    disabled
                    v-model:value={drawerFormState.payCapacity}
                    style="width: 100%"
                  >
                    <a-row>
                      <a-col span={6}>
                        <a-checkbox value="A">{$t("tripartite18")}</a-checkbox>
                      </a-col>
                      <a-col span={6}>
                        <a-checkbox value="B">{$t("tripartite19")}</a-checkbox>
                      </a-col>
                    </a-row>
                  </a-checkbox-group>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row" gutter={16}>
              <a-col span={12}>
                <a-form-item
                  label={$t("tripartite9")}
                  name="sort"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 16 }}
                  rules={[
                    {
                      required: true,
                      trigger: ["change", "blur"],
                      validator: (rule: any, value: string) => {
                        if (isEmptyType(value)) {
                          helpRef.value = (
                            <i class="fs10">{$t("tripartite3")}</i>
                          );
                          return Promise.reject();
                        }

                        if (+value > 99999) {
                          helpRef.value = (
                            <i class="fs10">{$t("tripartite4")}</i>
                          );
                          return Promise.reject();
                        }

                        helpRef.value = <i class="fs10">{$t("tripartite2")}</i>;
                        return Promise.resolve();
                      },
                    },
                  ]}
                  help={helpRef.value}
                >
                  <a-input-number
                    min={0}
                    max={99999}
                    style="width: 100px"
                    vModel:value={drawerFormState.sort}
                    onInput={(value: any) => {
                      value = value?.replace(/^(0+)|[^\d]+/g, "");
                      drawerFormState.sort = +value > 99999 ? 99999 : value;
                    }}
                    onBlur={() => {
                      drawerFormState.sort =
                        +drawerFormState.sort > 99999
                          ? 99999
                          : drawerFormState.sort;
                    }}
                  />
                </a-form-item>
              </a-col>

              <a-col span={12}>
                <a-form-item
                  label={$t("tripartite10")}
                  name="comment"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 16 }}
                >
                  {withDirectiveInput({
                    vNode: (
                      <a-textarea
                        vModel:value={drawerFormState.comment}
                        placeholder={$t("tripartite16")}
                        rows={4}
                        maxlength={100}
                        showCount={true}
                      />
                    ),
                  })}
                </a-form-item>
              </a-col>
            </a-row>

            <a-row class="s-drawer-extra-row">
              <s-title>{$t("base.baseSet")}</s-title>
            </a-row>
            <a-row class="s-drawer-extra-row" gutter={16}>
              <a-col span="12">
                <a-form-item
                  label={$t("tripartite11")}
                  name="is_disabled"
                  rules={[
                    {
                      required: true,
                      message: $t("tripartite14"),
                      trigger: ["change", "blur"],
                    },
                  ]}
                >
                  <s-radio-group
                    vModel={drawerFormState.is_disabled}
                    options={userStateMap}
                  ></s-radio-group>
                </a-form-item>
              </a-col>
            </a-row>
          </>
        );
      },
    },
  };
  return defineDrawer;
};
